<template>
  <div class=''>
    <van-form @submit="onSubmit" @failed="onFailed" ref="userForm">
      <!-- 用户名 -->
      <van-field
        v-model="form.username"
        name="用户名"
        label="用户名"
        placeholder="用户名"
        :rules="ruleList.name"
        maxlength="8"
      />

      <!-- 密码 -->
      <van-field
        v-model="form.password"
        type="password"
        name="密码"
        label="密码"
        placeholder="密码"
        :rules="[{ required: true, message: '请填写密码' }]"
        maxlength="6"
      />

      <!-- 手机号 -->
      <van-field
        v-model="form.phoneNumber"
        type="number"
        name="phoneNumber"
        label="电话号码"
        placeholder="请输入您的电话号码"
        :rules="ruleList.phone"
        maxlength="11"
      />

      <!-- 短信验证 -->
      <van-field
        v-model="sms"
        center
        clearable
        label="短信验证"
        placeholder="请输入短信验证码"
      >
        <template #button>
          <van-button size="small" type="primary">发送验证码</van-button>
        </template>
      </van-field>

      <!-- 地址选择 -->
      <van-field
        readonly
        clickable
        name="area"
        :value="cityValue"
        label="地区选择"
        placeholder="点击选择省市区"
        @click="showArea = true"
      />
      <van-popup v-model="showArea" position="bottom">
        <van-area
          :area-list="areaList"
          @confirm="seleCity"
        />
      </van-popup>

      <!-- 提交表单 -->
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit">
          提交
        </van-button>
      </div>
    </van-form>
  </div>
</template>
<script>

export default {
  data () {
    return {
      // 表单数据列表
      form: {
        username: '',
        password: '',
        phoneNumber: '',
        cityArr: []
      },
      // 验证规者列表
      ruleList: {
        name: [{ required: true, message: '请输入您的姓名' }],
        password: [{ required: true, message: '请输入您的密码' }, { pattern:/\d{6}/, message: '密码必须为6位数字' }],
        phone: [{ required: true, message: '请输入您的电话号码' }, { pattern:/^1([358][0-9]|4[579]|66|7[0135678]|9[89])[0-9]{8}$/, message: '请输入正确的电话号码' }]
      },
      areaList:{
        province_list: {
          110000: '北京市',
          120000: '天津市'
        },
        city_list: {
          110100: '北京市',
          110200: '县',
          120100: '天津市',
          120200: '县'
        },
        county_list: {
          110101: '东城区',
          110102: '西城区',
          110105: '朝阳区',
          110106: '丰台区',
          120101: '和平区',
          120102: '河东区',
          120103: '河西区',
          120104: '南开区',
          120105: '河北区',
        }
      },
      showArea: false,
      cityValue: '',  // 地点名称
      sms: '' // 短信验证码
    }
  },
  methods: {

    // 验证通过时执行的方法，values为表单对象。可用此项提交表单
    onSubmit(values) { 
      values.dd = '111'
      console.log('submit', values);
    },

    // 未通过表单验证规则时执行的方法
    onFailed(errorInfo) {
      this.$notify('请输入正确的内容')
    },

    // 城市选择器
    seleCity (info) { // info 为传递过来的选中的地区值
      let areaName = ''
      let areaNumArr = []
      // 循环出数据
      for (var i = 0; i < info.length; i++) {
        areaName = areaName+(i==0?'':'/')+info[i].name  // 地点名称填写
        areaNumArr.push(info[i].code) // 地点数字数组获取
      }
      // 赋值
      console.log(info)
      console.log(areaNumArr)
      this.cityValue = areaName // 显示地点
      this.cityArr = areaNumArr // 赋值给表单内容
      this.showArea = false // 关闭选项框
    }
  }
}
</script>

<style scoped>
</style>
